<?php include THEMES_PATH . 'public/before_body2.phtml';?>
  <style>
    .appointment {font-size:14px;}
    .appointment em {display:inline-block;width:90px;padding-right:20px;font-size:16px;font-style:normal;vertical-align:middle;}
    .appointment input, .appointment textarea {display:inline-block;width:92%;resize:none;}
    .appointment input {height: 40px}
    .appointment textarea {min-height:100px;}
    .arrange-horizontal label {float: left; width:33.33333%;}
    .arrange-horizontal input, .arrange-horizontal select {width:76%;}
    .arrange-horizontal select {height:40px;border:1px solid #ccc;}
    .appointment .btn {width:200px;max-height:40px;height:40px;font-size:16px;}
    .appointment .error.msg {margin-top:-25px;text-align:left;}
    .phone-box {padding:3em;border:1px solid #ccc;}
    .phone-box p {display:inline-block;position:absolute;top:-20px;left:42.5%;padding:0 10px;background-color:#fff;font-size:24px;color:#4a4a4a;}
    .shop strong {font-size:18px;}
    .shop span {font-size:14px;}
    .map-view {
      display: inline-block;
      height: 16px;
      padding-right: 25px;
      background: url() no-repeat right center;
      line-height: 1;
    }
    .shop-trans {
      overflow: hidden;
      position: relative;
    }
    .shop-trans p,
    .shop-trans img {
      transition: all .5s;
    }
    .shop-trans img {
      position: relative;
      right: 0;
    }
    .shop-trans.one img {
      right: auto;
      left: 0;
    }
    .shop-trans p {
      position: absolute;
      top: 0;
      right: 350px;
      bottom: 0;
      padding: 2em 6em 0;
      transform: translateX(100px);
      opacity: 0;
    }
    .shop-trans.one p {
      right: auto;
      transform: translateX(-100px);
    }
    .shop-trans:hover p {
      transform: translateX(80px);
      transition: all .4s .5s;
      opacity: 1;
    }
    .shop-trans:hover img {
      right: 20em;
    }

    .shop-trans.one:hover img {
      left: 25em;
    }

    .ie6 .shop p {
      position: static;
      padding: 0;
      margin-bottom: 30px;
    }

    .map {
      position: absolute;
      z-index: 5;
      min-width: 300px;
      border: 1px solid #000;
      box-shadow: 0 0 5px #000;
    }

    @media screen and (max-width: 930px) {
      .phone-box {margin-right:2%;margin-left:2%;}
    }

    @media screen and (max-width: 930px) {
      .appointment label em {display:block;margin-bottom:5px;}
      .arrange-horizontal em {text-align:left !important;}
      .appointment .btn-row {text-align:center !important;}
    }

    @media screen and (max-width: 768px) {
      .phone-box p {right:0;left:0;max-width:240px;margin-right:auto;margin-left:auto;}.shop-trans:hover img {
                                                                                         right: 0!important;
                                                                                       }
    }

    @media screen and (max-width: 568px) {
      .arrange-horizontal label {display:none;float:none;width:100%;}
      .pc-hide,.baomixieyi{display: none;}
      .appointment input, .appointment textarea, .appointment select {width:100%;}
      .appointment .btn {width:100%;height:40px;}
      .phone-box p {top:-17px;font-size:20px;}
    }

  </style>
  </head>
  <body>
<?php include THEMES_PATH.'public/header2.phtml';?>
  <link rel="stylesheet prefetch" href="/statics/front/css/font-awesome.min.css">
  <!--计数器计数器--><!--计数器计数器-->
  <form method="post" action="__SELF__" id="form_1" class="js-form main-width mb4x appointment js-appointment mbile-hide">
    <input type="hidden" name="ordertoken" value="<?php echo $ordertoken?>">
    <div class="pull-left  mbile-hide" style="width: 48%!important;margin-left: 0!important">
      <em  style=" padding-right:10px;">&nbsp;身高</em>
      <div class="datas-box"><input type="text" class="data" name="height" title="不能为空" onkeyup="if(this.value.length==1){this.value=this.value.replace(/[^1-9]/g,'')}else{this.value=this.value.replace(/\D/g,'')}" onafterpaste="if(this.value.length==1){this.value=this.value.replace(/[^1-9]/g,'')}else{this.value=this.value.replace(/\D/g,'')}"><div class="dw">cm</div>
      </div>
    </div>
    <div class="pull-left  mbile-hide" style="width: 48%!important;margin-left: 4%!important">
      <em style=" padding-right:10px;">&nbsp;体重</em>
      <div class="datas-box"><input type="text" class="data" name="weight" title="不能为空" onkeyup="if(this.value.length==1){this.value=this.value.replace(/[^1-9]/g,'')}else{this.value=this.value.replace(/\D/g,'')}" onafterpaste="if(this.value.length==1){this.value=this.value.replace(/[^1-9]/g,'')}else{this.value=this.value.replace(/\D/g,'')}"><div class="dw">kg</div>
      </div>
    </div>

    <div style="clear: both;"></div>
    <div class="datas-box">
      <div class="data-title">姓名</div>
      <input type="text" class="data" name="name">
    </div>
    <div class="datas-box">
      <div class="data-title">电话</div>
      <input type="tel" class="data" name="phone" onKeyUp="if(this.value.length==1){this.value=this.value.replace(/[^1-9]/g,'')}else{this.value=this.value.replace(/\D/g,'')}" onafterpaste="if(this.value.length==1){this.value=this.value.replace(/[^1-9]/g,'')}else{this.value=this.value.replace(/\D/g,'')}" >
    </div>
    <input type="hidden" name="class_id" value="2"><!--手机端默认是上门量体-->
    <div class="datas-box">
      <div class="data-title">城市</div>
      <select type="text" class="data city_id"  name="city_id" style="border: none;background-color:#fff">
        <option value="0">请选择</option>
        <option value="0571">杭州</option>
        <option value="0510">无锡</option>
        <option value="025">南京</option>
      </select>
    </div>

    <div class="clearfix"></div>
    <div class="datas-box">
      <div class="data-title">地址</div>
      <input type="text" class="data" name="address">
    </div>
    </div>
    <div class="align-center btn-row" style="margin-top: 40px;">
      <input type="hidden" name="dosubmit" value="1">
      <input type="button" id="submit_1" class="btn" value="立即下单"/>
    </div>
  </form>

  <form method="post" action="__SELF__" id="form_2" class="js-form main-width mb4x appointment pc-hide">
    <input type="hidden" name="ordertoken" value="<?php echo $ordertoken?>">

    <div class="clearfix arrange-horizontal ">
      <label class="mb2x" style="float:left">
        <em class="align-right" style="padding-right: 10px!important;"> 姓&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;名</em>
        <input type="text" name="name" title="<?php echo L('name_required'); ?>">
      </label>
      <label class=" mb2x" style="float:left">
        <em class="align-right" style="padding-right:10px;">电&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;话</em>
        <input type="text" name="phone" onkeyup="if(this.value.length==1){this.value=this.value.replace(/[^1-9]/g,&#39;&#39;)}else{this.value=this.value.replace(/\D/g,&#39;&#39;)}" onafterpaste="if(this.value.length==1){this.value=this.value.replace(/[^1-9]/g,&#39;&#39;)}else{this.value=this.value.replace(/\D/g,&#39;&#39;)}" title="<?php echo L('phone_required'); ?>">
      </label>
      <label class="pull-left mb2x" style="margin-left: 0!important">
        <em class="align-right" style=" padding-right:10px;">身&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;高</em>
        <input type="text" class="name" name="height" title="请填写您的具体身高" placeholder="cm" onkeyup="if(this.value.length==1){this.value=this.value.replace(/[^1-9]/g,'')}else{this.value=this.value.replace(/\D/g,'')}" onafterpaste="if(this.value.length==1){this.value=this.value.replace(/[^1-9]/g,'')}else{this.value=this.value.replace(/\D/g,'')}">
      </label>
      <label class="pull-left mb2x " style=" margin-left: 0!important">
        <em class="align-right" style=" padding-right:10px;">体&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;重</em>
        <input type="text" name="weight" class="name" title="请填写您的具体体重" placeholder="kg" onkeyup="if(this.value.length==1){this.value=this.value.replace(/[^1-9]/g,'')}else{this.value=this.value.replace(/\D/g,'')}" onafterpaste="if(this.value.length==1){this.value=this.value.replace(/[^1-9]/g,'')}else{this.value=this.value.replace(/\D/g,'')}">
      </label>
      <label class="pull-left mb2x " style=" margin-left: 0!important">
        <em class="align-right" style=" padding-right:10px;">省</em>
        <input type="text" name="delivery_province" class="name">
      </label>
      <label class="pull-left mb2x " style=" margin-left: 0!important">
        <em class="align-right" style=" padding-right:10px;">市</em>
        <input type="text" name="delivery_city" class="name">
      </label>
      <label class="pull-left mb2x " style=" margin-left: 0!important">
        <em class="align-right" style=" padding-right:10px;">区</em>
        <input type="text" name="delivery_address" class="name">
      </label>
    </div>
    </div>
    <label class="db mb2x">
      <em class="align-right" style="padding-right:10px;">地&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;址</em>
      <input type="text" name="address" title="<?php echo L('street_address_required'); ?>">
    </label>
    <label class="db mb1x">
      <em class="align-right" style="padding-right:10px;">留&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;言</em>
      <textarea name="remark" placeholder="<?php echo L('_additional_'); ?>" class="vt"></textarea>
    </label>
    <label class="db mb2x">
      <em></em>
      <p class="dib" style="width:74%;font-size:14px;">* 保密声明：我们不会把您的个人信息透露给第三方，请放心填写。</p>
    </label>
    <div class="align-center btn-row" style="margin-top: 40px;">
      <input type="hidden" name="dosubmit" value="1">
      <input type="button" id="submit_2" class="btn" value="立即下单"/>
    </div>
  </form>
  <div class="appointment align-center btn-row scrool-hide">
    <button type="button" class="btn" id="scrool-hidden-new" style="position: fixed; left: 0px; bottom: 0px;z-index: 999; display: none; ">立即下单</button>
  </div>
  <script src="/statics/front/widgets/My97DatePicker/WdatePicker.js"></script>
  <script src="http://api.map.baidu.com/api?v=2.0&ak=mEWdV2P0NcBhaxcGBvlHfruy"></script>
  <script>
    $(function () {

      $("#submit_1").click(function(){
        $("#form_1").submit();
      });

      $("#submit_2").click(function(){
        $("#form_2").submit();
      });

      $("#scrool-hidden-new").click(function(){
        $("#form_1").submit();
      });
      var area_arr = '<?php echo json_encode(C("area_arr"));?>';
      var area = JSON.parse(area_arr);
      $('.city_id').change(function(){
        // var this_title = $(this).find("option:selected").text();
        //$('.area_title').html(this_title)
        var city_id = $(this).val();
        if(city_id!='0'){
          var this_area_data = area[city_id];
          var html = '<option value="0">请选择区域</option>';
          for(var i in this_area_data){
            html += '<option value="'+i+'">'+this_area_data[i]+'</option>'
          }
          $('.area_option').html(html);
          $(this).parents('.js-form').find('.js-area').removeClass('hide');
        }else{
          $(this).parents('.js-form').find('.js-area').addClass('hide');
        }

      });
      $('#form_1').validate({
        errorElement: 'p',
        submitHandler: function(form) {
          form.submit();
        },
        errorPlacement: function(error, element) {
          var differ = element.offset().left - element.parent().offset().left;
          element.after(error);
          error.addClass('msg').css('margin-left', differ);
        },
        rules: {
          height:'required',
          weight:'required',
          name: 'required',
          phone: 'required',
          area: {
            min: 1
          },
          class_id: {
            min: 1
          },
          store_id: {
            min: 1
          },
          arrival_time: 'required',
          address: 'required'
        }
      });

      $('.js-date').on('click', function () {
        WdatePicker({
          skin: 'biggerSize'
        });
      });
    });
  </script>
  <!--移动端屏幕滚动显示按钮script-->
  <script>
    $(window).scroll(function(){
      if($(this).scrollTop()>1000){
        $("#scrool-hidden-new").css({"display":"block","opacity":1,"bottom":"0px"})
      }else{
        $("#scrool-hidden-new").css({"display":"none","opacity":0,"bottom":"0"})

      }

    })
  </script>
  <script src="/statics/front/js/scripts/measure/index.js"></script>

<?php include THEMES_PATH.'public/footer2.phtml';?>
<?php include THEMES_PATH.'public/after_body.phtml';?>